﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生js倒计时(原创)-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<style>
* {
	margin:0;
	padding:0;
}
/*倒计时开始*/
#timer-Box {
	user-select:none;
	width:300px;
	padding-left:12px;
	overflow:hidden;
	height:auto;
	background:rgb(232,55,51);
	margin:10px auto;
	text-align:center;
	color:#fff;
}
#timer-Box>h1 {
	margin-top:20px;
}
#timer-Box>p:nth-of-type(1) {
	margin-top:5px;
	color:rgba(255,255,255,0.5);
}
#timer-Box>.time {
	width:100%;
	display:flex;
	justify-content:space-around;
}
.time>div {
	position:relative;
	width:40px;
	height:40px;
	background:#333;
	font-weight:bold;
	line-height:40px;
	margin:20px 0;
}
.time>div::after {
	display:block;
	content:'';
	position:absolute;
	width:100%;
	height:1px;
	background:rgb(232,55,51);
	top:50%;
	transform:translateY(-50%);
}
.time>span {
	display:inline-block;
	line-height:40px;
	width:40px;
	height:40px;
	margin:20px 0 50px;
}
/*倒计时结束*/</style>
</head>
<body>
<div id="timer-Box">
    <h1>开学倒计时</h1>
    <p>Waiting...</p>
    <i class="iconfont icon-shijian"></i>
    <p>距离开学还剩</p>
    <div class="time">
        <div class="days">00</div>
        <span>天</span>
        <div class="hours">00</div>
        <span>时</span>
        <div class="minutes">00</div>
        <span>分</span>
        <div class="seconds">00</div>
        <span>秒</span>
    </div>
</div>

<script>
//倒计时类
class Time {
    constructor(time) {
        this.oDay = document.querySelector('.days');
        this.oHour = document.querySelector('.hours');
        this.oMinute = document.querySelector('.minutes');
        this.oSecond = document.querySelector('.seconds');
        this.vacationTime = new Date(time);
        this.getTime();
        this.timer = setInterval(() => {
            this.getTime();
        }, 1000)
    }
    getTime() {
        let curTime = new Date();
        //得到相差总时间（秒）
        let differTime = (this.vacationTime - curTime) / 1000;
        let day = Math.floor(differTime / (60 * 60 * 24)); //剩余天数
        day = day >= 10 ? day : '0' + day;
        let hour = Math.floor(differTime / (60 * 60) % 24); //剩余小时
        hour = hour >= 10 ? hour : '0' + hour;
        let minute = Math.floor(differTime / 60 % 60); //剩余分钟
        minute = minute >= 10 ? minute : '0' + minute;
        let second = Math.floor(differTime % 60); //剩余秒
        second = second >= 10 ? second : '0' + second;
        this.oDay.innerText = day;
        this.oHour.innerText = hour;
        this.oMinute.innerText = minute;
        this.oSecond.innerText = second;
        if (parseInt(day) <= 0 && parseInt(hour) <= 0 && parseInt(minute) <= 0 && parseInt(second) <= 0) {
            clearInterval(this.timer);
            this.oDay.innerText = '时';
            this.oHour.innerText = '间';
            this.oMinute.innerText = '到';
            this.oSecond.innerText = '了';
        }
    }
}

//需传入的格式:2019-9-1 9:00:00
//开启倒计时
 let time = new Time('2019-9-1 9:00:00');
</script>

</body>
</html>
